import {gsap} from "gsap";
import {DrawSVGPlugin} from "./gsap/DrawSVGPlugin.min";

gsap.registerPlugin(DrawSVGPlugin);
let tl = gsap.timeline({defaults: {ease: 'none', duration: 1, transformOrigin: '50% 50%'}});
let contentTl = gsap.timeline({
    ease: 'none', defaults: {duration: 2}
});

export function start(){
    gsap.set(".loading_box,#loading_top,#loading_bottom", {drawSVG: '0%'});
    tl.addLabel('loading');
    tl.to(".loading_box", {id: "loading_box_1", rotate: -360, repeat: -1}, 'loading');
    tl.to('.loading_box', {id: "loading_box_2", repeat: -1, drawSVG: '0% 95%', yoyo: true}, 'loading');

    contentTl.addLabel('loading_logo', 0);
    contentTl.to('#loading_top,#loading_bottom', {
        drawSVG: true,
        yoyo: true,
        delay: 0.5
    }, 'loading_logo').to('#loading_top,#loading_bottom', {fillOpacity: 1, delay: 0.5});

}


export function loadingOver () {
    return new Promise(function (success) {
        gsap.getById('loading_box_2').kill();
        gsap.getById('loading_box_1').kill();
        contentTl.kill();
        tl.to('.loading_box,#loading_top,#loading_bottom', {drawSVG: true, duration: 1}).to('#loading_top,#loading_bottom', {fillOpacity: 1, duration: 1}, '-=1').to('.loading_box', {
            drawSVG: 0, duration: 0.5, rotate: 360, onComplete: function () {
                gsap.to('.all_shwo', {
                    duration: 1, autoAlpha: 0,
                    onComplete: function () {
                        success();
                        tl.kill();
                    }
                });
            }
        });
    })
}
